<template>
  <div class="nav">
    <el-collapse class="nav-main" v-model="activeNames" @change="handleChange">
      <div class="nav-tab" v-for="(i, index) in navList" :key="index">
        <el-collapse-item class="nav-tab-inner" :name="index">
          <template slot="title">
            <div class="tab-title-icon">
              <i :class="i.icon"></i>
            </div>
            {{ i.title }}
          </template>
          <div class="tab-itemlist">
            <div class="tab-item" v-for="(n, index) in i.list" :key="index">
              <span @click="toPage(n.address)">{{ n.title }}</span>
            </div>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "Service",
  props: {
    navList: {
      type: Array,
    },
  },
  data() {
    return {
      activeNames: ["1"],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    toPage(address) {
      console.log("address");
      if (this.$route.path !== address) {
        this.$router.push({path :address});
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-main {
  width: 345px;
}

.nav-tab {
  margin: 10px 0px 0px 0px;
  > .nav-tab-inner {
    background-color: white;
    border-radius: 5px;
    /deep/ .el-collapse-item__header {
      border-radius: 5px;
    }
  }
}

.tab-title-icon {
  margin: 5px 10px 5px 10px;
}

.tab-itemlist {
  display: flex;
  justify-content: space-around;
  margin: 5px 20px 5px 20px;
}
</style>
